<script setup>
import { hexToRgb } from '@layouts/utils'
import VueApexCharts from 'vue3-apexcharts'
import { useTheme } from 'vuetify'

const props = defineProps({
  triggerDayList: {
    type: Array,
    required: false,
  },
  series: {
    type: Array,
    required: false,
  },
  chartInfo: {
    type: Object,
    required: true,
  },
})
const chartInfo = ref(props.chartInfo || [])
const triggerDayList = ref(props.triggerDayList || [])

const series = chartInfo.value.series

const vuetifyTheme = useTheme()
const chartConfig = computed(() => getAreaChartSplineConfig(vuetifyTheme.current.value))

const colorVariables = themeColors => {
  const themeSecondaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['medium-emphasis-opacity']})`
  const themeDisabledTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['disabled-opacity']})`
  const themeBorderColor = `rgba(${hexToRgb(String(themeColors.variables['border-color']))},${themeColors.variables['border-opacity']})`
  const themePrimaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['high-emphasis-opacity']})`
  
  return { themeSecondaryTextColor, themeDisabledTextColor, themeBorderColor, themePrimaryTextColor }
}

const getAreaChartSplineConfig = themeColors => {
  // const areaColors = {
  //   series3: '#e0cffe',
  //   series2: '#b992fe',
  //   series1: '#ab7efd',
  // }
  
  const areaColors = {
    series3: '#00d4bd',
    series2: '#fdd835',
    series1: '#ffa1a1',
  }

  const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
  
  return {
    chart: {
      parentHeightOffset: 0,
      toolbar: { show: false },
    },
    tooltip: { shared: false },
    dataLabels: { enabled: false },
    stroke: {
      show: false,
      curve: 'straight',
    },
    legend: {
      position: 'top',
      horizontalAlign: 'left',
      fontSize: '13px',
      labels: { colors: themeSecondaryTextColor },
      markers: {
        offsetY: 1,
        offsetX: -3,
      },
      itemMargin: {
        vertical: 3,
        horizontal: 10,
      },
    },
    colors: [areaColors.series3, areaColors.series2, areaColors.series1],
    fill: {
      opacity: 1,
      type: 'solid',
    },
    grid: {
      show: true,
      borderColor: themeBorderColor,
      xaxis: {
        lines: { show: true },
      },
    },
    yaxis: {
      labels: {
        style: { colors: themeDisabledTextColor, fontSize: '0.8125rem' },
      },
    },
    xaxis: {
      axisBorder: { show: false },
      axisTicks: { color: themeBorderColor },
      crosshairs: {
        stroke: { color: themeBorderColor },
      },
      labels: {
        style: { colors: themeDisabledTextColor, fontSize: '0.8125rem' },
      },
      categories: chartInfo.value.triggerDayList,
    },
  }
}

// const series = [
//   {
//     name: '成功',
//     data: [
//       100,
//       120,
//       90,
//       170,
//       130,
//       160,
//       140,
//     ],
//   },
//   {
//     name: '进行中',
//     data: [
//       60,
//       80,
//       70,
//       110,
//       80,
//       100,
//       90,
//     ],
//   },
//   {
//     name: '失败',
//     data: [
//       20,
//       40,
//       30,
//       70,
//       40,
//       60,
//       50,
//     ],
//   },
// ]
</script>

<template>
  <VueApexCharts
    type="area"
    height="270"
    :options="chartConfig"
    :series="series"
  />
</template>
